<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/* 第一种 */
		.div{
		width: 1200px;
		height:300px;
		margin: auto;	
		border: 1px solid red;
		display: flex;
		/* flex-direction:row; */
		justify-content:space-around;
		}
		#div1{
			width:200px;
			height:100px;
			border: 1px solid red;
			line-height: 100px;
			text-align: center;
		}


		/* 第二种 */
		.div2{
			width:100%;
			height:200px;
			border: 1px solid red;
			line-height: 200px;
			text-align: center;
			/* 方法1 */
			/* display: flex;
			justify-content: center;  */
			
		}
		.div2-1{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			/* 方法2 */
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -100px;
			margin-top: 355px;
			/* 方法3 */
			/* margin: 0 auto; */
		}



		/* 第三种 */
			.div3{
				width:100%;
				height:100%;
				border: 1px solid red;
				/* 方法1 */
				display: flex;
				justify-content: flex-end;
			}
			.divleft{
				width:200px;
				height:200px;
				border: 1px solid blue;
				line-height: 200px;
				text-align: center;
				float: left;
				/* 方法2 */
				position: absolute;
      			left: 0;
			}
			.divright{
				width:20%;
				height:200px;
				line-height: 200px;
				text-align: center;
				border: 1px solid green;
				float: right;
				/* 方法3 */
				/* position:fixed; */
      			/* right: 0; */

			}
	</style>

	<script type="text/javascript"  src="./jquery-3.5.1.min.js"></script>
	<script type="text/javascript" >
	$(function(){
		$("#div1,#div2").mouseover(function(){
		$(this).animate({width:"150%"},500);
		}).mouseout(function(){
		$(this).animate({width:"200px"},500);
		});
	});
	</script>
</head>
<body>
	第一种
	<div class="div">
	<div id="div1">1</div>
	<div id="div1">2</div>
	<div id="div1">3</div>
	<div id="div1">4</div>
	<div id="div1">5</div>
	</div>

	第二种
	<div class="div2">
	   <div class="div2-1">
			二
	   </div>	
	</div>


	第三种
	<div class="div3">
		<!-- 左边 -->
		<div class="divleft">
			左边盒子
		</div>
		<div class="divright">
			右边盒子
		</div>
	</div>
</body>
</html>